<template>
    <div class="Hot_Topic bgwhite mb15">
        <div class="HomeTit HomeTit_border">
            <div class="tit">热门帖子</div>
        </div>
        <div class="Hot_TopicBox">
            <ul>
                <li v-for="(item, index) in hotPostList" :key="index" class="dot">
                    <router-link :to="'/commentpost?id=' + item.id" tag="a">
                        <div class="tit">
                            <em class="dot">{{ item.title }}</em>
                            <i v-if="item.readCount > 500" class="hot"></i>
                        </div>
                        <div class="num">{{formatCommentCount(item.readCount)}}</div>
                    </router-link>
                </li>
                
            </ul>
        </div>
    </div>
</template>


<script setup name="Header">
import { postApi } from '@/api';
import { computed, ref, reactive, onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';
import { commonMethods } from '@/utils/common';
const emit = defineEmits(['updateUserInfo']);

// 公共方法和计算属性
const { formatCommentCount } = commonMethods();

// 路由
const router = useRouter();

// 生命周期
onBeforeMount(() => {
    getPostList();
})

/**
 * @name 热门帖子
 */
const hotPostList = ref([]);
const queryParams = reactive({
    isRecommend: false,
    keyword: '',
    sortField: 'commentCount',
    sortOrder: 'desc',
    pageNo: 1,
    pageSize: 10
})
const getPostList = () => {
    postApi.getPostList(queryParams).then((res) => {
        hotPostList.value = res.result.list;
    }).catch((err) => { })
}

</script>


<style lang="less" scoped></style>